<template>
	<view class="container" :key="storeKey">
		<nav-top :title="navTitle" :type="navType" />
		<nav-background :url="navBackgroundUrl" :imageHeight="navTopBackgroundImageHeight" />
		<view class="content">
			<view class="desc">
				<text class="store-name">{{storeInformation.shop?.name}}</text>
				<view class="recent">
					<!-- 分数星星 -->
					<view>
						<image class="star" src="@/static/images/home/star@2x.png" mode=""></image>
						<text class="score">{{storeInformation.shop?.score}}</text>
					</view>
					<image class="sent-type" src="@/static/images/home/sentTypeByStore2x.png" mode=""></image>
					<text class="sent-time">配送约50分钟</text>
					<text class="sail-count">月销{{storeInformation.shop?.sales}}</text>
				</view>
				<text class="style-desc">{{storeInformation.shop?.notice}}</text>
				
				<image v-if="!storeInformation.star" class="collect" @click="toCollect(true)" src="@/static/images/home/collect@2x.png"></image>
				<image v-if="storeInformation.star" class="collect" @click="toCollect(false)" src="@/static/images/home/cancelCollect@2x.jpg"></image>
			</view>

			<view class="dish-nav" @click="changeDishShow">
				<text id="do" class="nav-item" :class="{'active' : dishShow === 'do'}">
					点菜
				</text>
				<text id="comment" class="nav-item" :class="{'active' : dishShow === 'comment'}">
					评价
				</text>
				<text id="store" class="nav-item" :class="{'active' : dishShow === 'store'}">
					商家
				</text>
			</view>

			<DishShow :type="dishShow" />
		</view>
	</view>
</template>


<script setup>
	import {
		watch,
		onBeforeMount,
		reactive,
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import request from "@/Api/request.js"
	import navBackgroundUrl from "@/static/images/tabBar/storeBackground@2x.png"
	import DishShow from "./DishShow/DishShow.vue";
	const navTopBackgroundImageHeight = 424
	const navTitle = "";
	const navType = "search";
	const dishShow = ref("do")
	let storeInformation = reactive({})
	let shopId = ref()
	// 获取数据后即时更新页面
	let storeKey = ref("storeKey0")
	onLoad((option) => {
		shopId.value = option.id
		request({
			url: `/shop/` + shopId.value,
			method: "GET"
		}).then((res) => {
			storeInformation = res;
			storeKey.value += "1" 
			console.log("shop", storeInformation);
		})
	})

	const params = {
		shopId: 0,
		star:true
	}
	

	function changeDishShow(e) {
		if (e.target.id) {
			dishShow.value = e.target.id;
			e.target.classList += "active";
		}
	}
	
	function toCollect(star){
		star==true?params.star=true :params.star=false;
		params.shopId=shopId.value;
		request({
			url: "/shop/updateStar",
			method: "GET",
			params
		}).then((res)=>{
			console.log(res);
			// var pages = getCurrentPages(); //获取所有页面的数组对象
			// var currPage = pages[pages.length - 1]; //当前页面
			// uni.redirectTo({
			// 				url: currPage.__page__.fullPath
			// 			})
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/commen.scss";

	.container {
		height: 100vh;
	}

	.content {
		margin-top: 36rpx;

		.desc {
			display: flex;
			flex-direction: column;
			margin: 4rpx 0 10rpx;
			gap: 6rpx;
			position: relative;

			.store-name {
				@include font-base(32, #333333, 600);
			}

			.recent {
				display: flex;
				gap: 16rpx;
				align-items: center;

				.star {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx
				}

				.score {
					@include font-base(24, #F16B13, 500);
				}

				.sent-type {
					width: 80rpx;
					height: 24rpx;
				}

				.sent-time,
				.sail-count {
					@include font-base(20rpx, #999999)
				}

			}

			.style-desc {
				@include font-base(20rpx, #999999)
			}

			.collect {
				width: 128rpx;
				height: 56rpx;
				position: absolute;
				right: 0;
				top: 24rpx;
			}
		}

		.dish-nav {
			padding: 48rpx 0 16rpx;
			display: flex;
			gap: 112rpx;
			position: relative;

			.nav-item {
				@include font-base(28, #666666, 400)
			}

			.active {
				position: relative;
				@include font-base(28, #000000, 500)
			}

			.active::after {
				content: "";
				position: absolute;
				width: 32rpx;
				height: 4rpx;
				background: #FFD93B;
				bottom: -14rpx;
				display: flex;
				left: .5em;

			}
		}

		.dish-nav::after {
			content: "";
			width: 100vw;
			position: absolute;
			height: 2rpx;
			background: #E6E6E6;
			bottom: 0;
			transform: translateX(-32rpx);
		}
	}
</style>